$(function () {
    // 参数设置为全局对象，将来筛选和分页都要用
    let q = {
        pagenum: 1, //是	//int	页码值
        pagesize: 2, //	//是	int	每页显示多少条数据
        cate_id: '', //否	//string	文章分类的 Id
        state: '', //否	//string	文章的状态，可选值有：已发布、草稿
    }

    let layer = layui.layer
    // 需求一：初始化文章分类列表
    initArticleList()

    function initArticleList() {

        // 发送axjos
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(({
            data: res
        }) => {
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            //    渲染文章列表
            let arr = []
            res.data.forEach(ele => {
                arr.push(`
                <tr>
                    <td><a href="javascript:;" style="color: blue">${ele.title}</a></td>
                    <td>${ele.cate_name}</td>
                    <td>${formData(ele.pub_date)}</td>
                    <td>${ele.state}</td>
                    <td>
                        <button  data-id="${ele.Id}"  class="btn-edit layui-btn layui-btn-xs">编辑</button>
                        <button  data-id="${ele.Id}"  class="del-btn del-edit layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                 </tr>
                `)
                // 循环结束，赋值
                $('tbody').empty().html(arr.join(''))
                // 分页数
                renderPage(res.total)
            })
        })
    }

    // 需求二：渲染筛选中的文章列表
    let form = layui.form;
    initArtCateList();

    function initArtCateList() {
        axios({
            url: "/my/article/cates",
        }).then(({
            data: res
        }) => {
            if (res.status != 0) {
                return layer.msg(res.message);
            }
            let arr = ['<option value="">请选择文章所属分类</option>'];
            res.data.forEach((ele) => {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `);
            });

            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            form.render()
        });
    }

    // 需求三：筛选功能
    $('#searchForm').on('submit', function (e) {
        // 渲染文章分类
        e.preventDefault()

        q.cate_id = $("[name=cate_id]").val()
        q.state = $("[name=state]").val()
        // 重新渲染文章列表
        initArticleList()
    })

    // 需求四：分页
    let laypage = layui.laypage;

    //执行一个laypage实例
    function renderPage(total) {
        laypage.render({
            elem: 'pagBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, //每条显示多少页
            curr: q.pagenum, //第几页
            // 显示区域
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            // limit:[2,3,5,10],
            // 页面切换触动的事件jump
            jump: function (obj, first) {
                if (!first) {
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        });
    }

    // 需求五：删除
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')
        layer.confirm('是否删除？', {
            icon: 3,
            title: '提示'
        }, function (index) {
            // 删除ajax
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg('删除成功')
                // （删除ajax成功后）当我们再次发起请求时，如果页面还有一条数据，当前页面--
                if ($('.del-btn').length == 1 && q.pagenum >= 2) {
                    q.pagenum--
                }
                initArticleList()
            })
            layer.close(index)
        })
    })
})